import { ComponentType } from "../component/index";
import { Base } from "../core/Base"
import { browser } from "../core/browser";
import { must,any } from "../core/logic";
import { EventType } from "../event/index";
/**
 * 弹窗类
 * @class
 * @memberof w.info
 */
class Popup extends Base {
  /**
   * @constructor
   * @param {*} opts
   * @param opts.content {String}【必选】弹窗内容
   * @param opts.pointerEvents 弹窗事件是否透传到下面。
   * @param opts.mode {String} 【可选,缺省:"multiple"】"multiple":可在多个位置弹出,"single":只能在一个位置弹出。
   */
  constructor(opts = {}) {
    super(opts);
    const pointerEvents=any(opts.pointerEvents,false);
    this.content = document.createElement('div');
    this.content.innerHTML = must(opts.content);
    this.content.style.position = 'absolute';
    if(pointerEvents){
      this.content.style.pointerEvents="none";
    }
    this.content.style.pointerEvents=opts.pointerEvents;
    this.content.setAttribute('id', this.id);
    this._scene = null;
    this._visibility = true;
    this._offsetX = any(opts.offsetX,0);
    this._offsetY = any(opts.offsetY,0);
    this._mode = any(opts.mode, 'multiple');  // single, multiple
    this._anchor = any(opts.anchor,[0,0,0]);
    this.on(EventType.ComponentEvent,(ev)=>{
      if(ev.componentType===ComponentType.Camera){
        this.layout();
      }
    });
  }
  set visibility(v) {
    if (v !== this.visibility) {
      this._visibility = v;
      this.content.style.display = this.visibility ? 'block' : 'none';
    }
  }
  get visibility() {
    return this._visibility;
  }
  /**
   * @property {String} 弹窗锚点位置，世界坐标。
   */
  set anchor(v){
    this._anchor=v;
    this.layout();
    return this;
  }
  get anchor(){
    return this._anchor;
  }
  /**
   * @property {String} 弹窗模式。
   */
  set mode(v) {
    this._mode = v;
    return this;
  }

  get mode() {
    return this._mode;
  }
  /**
   * @property {w.Scene} 弹窗的场景。
   */
  set scene(v) {
    this._scene = v;
    return this;
  }

  get scene() {
    return this._scene;
  }

  /**
   * 弹出
   * @method
   */
  show() {
    this.onScene = true;
    this.layout();
    if (this.mode === 'single') {
      this.scene.popups.forEach(popup => {
        if (popup.mode === 'single') {
        let popupElement = document.getElementById(popup.id);
        if (popup.id === this.id) {
          popupElement && (popupElement.style.visibility = 'visiable');
        }
        else {
          //popupElement && (popupElement.style.visibility = 'hidden');
          popup.close();
        }}
      });
    }
  }
  /**
   * 关闭
   * @method
   */
  close() {
    if (this.onScene) {
      this.onScene = false;
      this.content.remove();
    }
  }

  layout() {
    if (this.onScene) {
      let camera = this.scene.getCamera();
      let pixel = camera.worldToPixel(this.anchor);

      // 只在元素不存在时添加到容器
      if (!document.getElementById(this.id)) {
        this.container.appendChild(this.content);
        this.content.style.visibility = 'visible';
      }

      // 将像素坐标转换为实际位置
      const left = pixel[0] / browser.devicePixelRatio + this._offsetX;
      const top = pixel[1] / browser.devicePixelRatio - this._offsetY;

      // 只在位置发生变化时更新样式
      if (this._lastLeft !== left || this._lastTop !== top) {
        this.content.style.left = left + 'px';
        this.content.style.top = top + 'px';

        // 记录最后的位置
        this._lastLeft = left;
        this._lastTop = top;
      }
    }
  }
  /**
   * 移除
   * @method
   */
  remove() {
    if (this.onScene) {
      this.onScene = false;
      this.content.remove();
    }
  }

  get container() {
    if (this.scene) {
      return this.scene.engine.canvas.parentNode;
    }
  }
}

export {
  Popup
}
